<template>
  <div>
    <div class="node-wrap">
      <div
        class="node-wrap-box"
        :class="[nodeConfig.type == 0 ? 'start-node ' : '',nodeConfig.type == 2 ? 'no-arrow ' : '']"
      >
        <node 
          :nodeConfig.sync="nodeConfig" 
          :moduleList="moduleListFrom" 
          :parent="parentNode" 
          @delete="deleteNode" 
          @open="openNode"
          @startAppSelectChange="startAppSelectChangeHandler"
          @triggleActionSelectChange="triggleActionSelectChangeHandler"
          @executeApplicationSelectChange="onExecuteApplicationSelectChangeHandler"
        />
      </div>
      <addNode
        :childNodeP.sync="nodeConfig"
        :type="(nodeConfig.type == 0 || nodeConfig.type == 2) ? 'placeHolder' : ''"
      ></addNode>
    </div>
    <div
      class="branch-wrap"
      v-if="nodeConfig.childNodes && nodeConfig.childNodes.length > 0"
    >
      <div class="branch-box-wrap">
        <div class="branch-box">
          <div
            :class="['col-box',item.type==2?'pt-none':'',nodeConfig.childNodes.length > 1 ? 'pt-max':'',nodeConfig.childNodes.length==1?'mt-fu':'']"
            v-for="(item, index) in nodeConfig.childNodes"
            :key="index"
          >
            <div
              class="condition-node"
            >
              <div class="condition-node-box">
                <nodeWrap
                  :key="index"
                  :nodeConfig.sync="item"
                  :moduleListFrom="moduleListFrom"
                  :moduleListTo="moduleListTo"
                  :treeData.sync="treeData"
                  @triggleActionSelectChange="triggleActionSelectChangeHandler"
                  @executeApplicationSelectChange="onExecuteApplicationSelectChangeHandler"
                ></nodeWrap>
              </div>
            </div>
            <template v-if="index == 0">
              <div class="top-left-cover-line"></div>
              <div class="bottom-left-cover-line"></div>
            </template>
            <template v-if="index == nodeConfig.childNodes.length - 1">
              <div class="top-right-cover-line"></div>
              <div class="bottom-right-cover-line"></div>
            </template>
          </div>
        </div>
        <addNode :type="nodeConfig.childNodes.length>1 ? 'placeHolder' : 'none'"></addNode>
      </div>
    </div>

    <node-drawer ref="nodeDrawer" :nodeConfig.sync="nodeConfig" :moduleListFrom="moduleListFrom" :moduleListTo="moduleListTo" :parent="parentNode" @updateNode="updateNodeConfig"/>
  </div>
</template>
<script>
// type
// 发起应用 0
// 触发器 1
// 条件 2
// 执行事件 3
// 发送消息 4
// 路由（条件组） 5
// 执行代码 6

/* components */
import node from './nodes/index.vue';
import nodeDrawer from './drawers/index.vue'
import { getNodeById } from '../utils/index';
export default {
  props: ['nodeConfig', 'moduleListFrom', 'moduleListTo',  'treeData'],
  data() {
    return {};
  },
  inject:['getParent'],
  computed: {
    parentNode(){
      return this.nodeConfig?.getParent ? this.nodeConfig?.getParent() : null
    }
  },
  watch: {
    nodeConfig:{
      handler(newVal){
        if(!this.nodeConfig?.getParent){
          this.nodeConfig.getParent = this.getParent
          this.$emit('update:nodeConfig', this.nodeConfig)
        }
      },
      deep:true
    }
  },
  methods: {
    deleteNode(id){
      this.removeTreeListItem(this.treeData, id)
    },
    removeTreeListItem(treeData, id) { // 根据id属性从数组（树结构）中移除元素
      if (!treeData || !treeData.childNodes || !treeData.childNodes.length) {
        return
      }
      for (let i = 0; i < treeData.childNodes.length; i++) {
        if (treeData.childNodes[i].uniqueId === id) {
          treeData.childNodes.splice(i, 1);
          break;
        }
        this.removeTreeListItem(treeData.childNodes[i], id)
      }
    },
    openNode(){
      // 如果没有选择发起应用api点击触发器就return
      if(this.nodeConfig.type == 1 && !this.parentNode?.data?.bizTypeId) return
      this.$refs.nodeDrawer.open(this.nodeConfig)
    },
    startAppSelectChangeHandler() {
      this.$emit('startAppSelectChange')
    },
    triggleActionSelectChangeHandler() {
      this.$emit('triggleActionSelectChange')
    },
    onExecuteApplicationSelectChangeHandler() {
      this.openNode()
    },
    updateNodeConfig(v) {
      console.log(v)
      this.$emit('update:nodeConfig', v)
    }
  },
  components: {
    [node.name]: node,
    [nodeDrawer.name]:nodeDrawer
  },
};
</script>
<style lang="scss" scoped></style>
